<template>
  <view class="form-wall">
    <view class="form-main">
      <view class="form-h4">基础信息</view>
      <view class="form-inner form-coverImg">
        <view class="flex1">
          <view class="form-lable required">封面图</view>
          <view class="form-lable_tip">清晰真实的封面，会有助招聘哦</view>
        </view>
        <navigator url="/subPage/imageCropper" class="cover-img">
          <image v-if="!form.url || form.url == ''" class="cover-img" src="@/static/images/form/upimg.png">
          </image>
          <!-- <image v-else class="cover-img" :src="form.url"></image> -->
          <image v-else class="cover-img" :src="urlPath"></image>
        </navigator>
      </view>
      <view class="form-inner">
        <view class="form-lable required">岗位名称</view>
        <input type="text" v-model="form.positionName" class="form-input" placeholder="请输入" />
      </view>
      <view class="form-inner" @click="industryOpen">
        <view class="form-lable required">岗位行业</view>
        <view class="form-picker">
          <text v-if="industryText == ''" class="form-input placeholder">请选择</text>
          <text v-else class="form-input">{{ industryText }}</text>
          <uni-icons type="forward" class="forward-icon" style="color: #989898"></uni-icons>
        </view>
        <!-- <input type="text" v-model="industryText" class="form-input" placeholder="请选择"/>
				<uni-icons type="forward" class="forward-icon" style="color: #989898;"></uni-icons> -->
      </view>
      <view class="form-inner">
        <view class="form-lable required">亮点标签</view>
        <view class="labelList2" @click="lableIdChange">
          <text v-if="form.labelId.length == 0" class="form-input placeholder">
            请选择
          </text>

          <template v-for="item in labelList">
            <view :key="item.labelId" v-if="form.labelId.includes(item.labelId)" class="labelItem">
              {{ item.labelName }}
            </view>
          </template>
        </view>
        <uni-icons type="forward" style="color: #989898"></uni-icons>
      </view>
      <view class="form-inner">
        <view class="form-lable required">学历要求</view>
        <picker class="form-picker" @change="educationChange" :value="educationIndex" :range="educationList">
          <text v-if="form.education === ''" class="form-input placeholder">请选择</text>
          <text v-else class="form-input">{{
            educationList[educationIndex]
          }}</text>
          <uni-icons type="forward" class="forward-icon" style="color: #989898"></uni-icons>
        </picker>
      </view>
      <view class="form-inner">
        <view class="form-lable required">经验要求</view>
        <picker class="form-picker" @change="experienceChange" :value="experienceIndex" :range="experienceList">
          <text v-if="form.experience == ''" class="form-input placeholder">请选择</text>
          <text v-else class="form-input">{{
            experienceList[experienceIndex]
          }}</text>
          <uni-icons type="forward" class="forward-icon" style="color: #989898"></uni-icons>
        </picker>
      </view>
      <view class="form-inner">
        <view class="form-lable required">招聘人数</view>
        <input type="text" v-model="form.recruitmentCount" class="form-input" placeholder="请输入" />
      </view>
      <view class="form-inner" @click="regionOpen">
        <view class="form-lable required">工作地址</view>
        <view class="form-picker">
          <text v-if="regionText == ''" class="form-input placeholder">请选择地区省市区街道</text>
          <text v-else class="form-input">{{ regionText }}</text>
          <uni-icons type="forward" class="forward-icon" style="color: #989898"></uni-icons>
        </view>
        <!-- <input type="text" v-model="regionText" class="form-input" placeholder="请选择地区省市区街道"/>
				<uni-icons type="forward" class="forward-icon" style="color: #989898;"></uni-icons> -->
      </view>
      <view class="form-inner">
        <view class="form-lable required">详细地址</view>
        <input type="text" v-model="form.detailedAddress" class="form-input" placeholder="请输入" />
      </view>
      <view class="form-inner">
        <view class="form-lable required">工作地点</view>
        <view class="address-text">{{ form.longitude }} {{ form.latitude }}</view>
        <view class="address-btn" @click="chooseLocation">获取定位</view>
      </view>
    </view>

    <view class="form-main">
      <view class="form-h4">岗位介绍</view>
      <view class="form-textarea">
        <textarea class="textarea" v-model="form.description" :maxlength="2000" placeholder="请填写内容…"
          placeholder-style="rgba(0, 0, 0, 0.2)"></textarea>
        <text class="textarea-num">{{ num }}/2000</text>
      </view>
    </view>

    <view class="form-main">
      <view class="form-h4">工作环境</view>
      <view class="form-inner" style="border-bottom: none">
        <view class="flex1">
          <view class="form-lable">上传图片</view>
          <view class="form-lable_tip">支持上传jpg/png，最多上传5张</view>
          <!-- <upload-img @change="uploadImgFn" :limit = "5" :value="form.ossId"></upload-img> -->
          <uploadImgList @change="uploadImgFn" :limit="5" :value="ossList"></uploadImgList>
        </view>
      </view>
    </view>
    <view class="form-main">
      <view class="form-h4">结算周期</view>

      <view class="tab-row">
        <view v-for="item in calculationTypeOption" :key="item.key" class="tab-col"
          :class="{ active: item.key === form.calculationType }" @click="tabChange(item.key)">{{ item.name }}
        </view>
      </view>
      <view>
        <view class="form-inner">
          <view class="form-lable">岗位类型</view>
          <uni-data-checkbox v-model="form.positionType" @change="positionTypeChange" :localdata="positionTypeOption"
            selectedColor="#FF9E24"></uni-data-checkbox>
        </view>
        <view class="form-inner">
          <view class="form-lable">岗位薪酬</view>
          <input type="text" v-model="form.startSalary" class="form-input" placeholder="请输入" />
          <text class="text-line" v-if="form.positionType === '2' || form.positionType === '3'">-</text>
          <input v-if="form.positionType === '2' || form.positionType === '3'" type="text" v-model="form.endSalary"
            class="form-input" placeholder="请输入" />
          <view class="form-right">
            <text style="margin-right: 20rpx">元</text>
            <text class="placeholder2">/ {{ salaryPeriodLabel }}</text>
            <!-- <picker
              class="form-picker"
              @change="salaryPeriodChange"
              :value="salaryPeriodIndex"
              :range="salaryPeriodList">
              <text class="form-input"
                >/ {{ salaryPeriodList[salaryPeriodIndex] }}</text
              >
              <uni-icons
                type="forward"
                class="forward-icon"
                style="color: #989898"></uni-icons>
            </picker> -->
          </view>
        </view>
        <view class="form-inner" v-if="form.positionType !== '1' && positionHide">
          <view class="form-lable">用工类型</view>
          <view class="tagList flex1">
            <view v-for="item in usageTimeTypeOption" class="tagItem" :class="{ active: item.key === form.usageTimeType }"
              @click="timeTypeChange(item.key)">
              {{ item.name }}
            </view>
          </view>
        </view>
        <view class="form-inner" v-if="
          (form.usageTimeType === '1' || form.positionType === '1') &&
          positionHide
        ">
          <view class="form-lable">用工时间</view>
          <uni-datetime-picker class="form-input" :border="false" :clear-icon="false" v-model="datetimerange"
            type="daterange" rangeSeparator="至" :start="startDate" />
        </view>
      </view>
    </view>
    <view class="submit" @click="submitFn">
      {{ form.positionId ? "保存岗位" : "发布岗位" }}
    </view>

    <!-- 亮点标签 -->
    <uni-popup ref="labelPopup" type="bottom" background-color="#fff">
      <view class="popup-wall">
        <view class="popup-title">亮点标签</view>
        <view class="labelList">
          <view v-for="item in labelList" :key="item.labelId" @click="labelChange(item.labelId)" class="labelItem"
            :class="{ active: form.labelId.includes(item.labelId) }">{{ item.labelName }}
          </view>
        </view>
        <view class="popup-ft">
          <view class="popup-ftBtn" @click="popupClose"> 取 消 </view>
          <view class="popup-ftBtn active" @click="popupClose"> 确 认 </view>
        </view>
      </view>
    </uni-popup>
    <!-- 行业分类 -->
    <uni-popup ref="industryPopup" type="bottom" background-color="#fff">
      <view class="cetetory">
        <view class="classify">
          <view>
            <view class="left">
              <view v-for="item in industryList" :key="item.id" @click="changeClassfiy(item)"
                :class="industryId == item.id ? 'active' : ''">{{ item.label }}
              </view>
            </view>
            <view class="right">
              <view v-for="item in secondList" :key="item.id" class="second-item">
                <view class="post-name">{{ item.label }}</view>
                <view class="post-num">
                  <view v-for="i in item.children" :key="i.id" @click="changePost(i, item)"
                    :class="activeList.indexOf(i.id) != -1 ? 'active' : 'post'">
                    <text class="label">{{ i.label }}</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
          <view class="c_fixd"></view>
        </view>
      </view>
      <view class="btn">
        <view class="cancel" @click="handleCancel">取消</view>
        <view class="confirm" @click="handleConfirm">确认</view>
      </view>
    </uni-popup>

    <region-select ref="regionSelect" @change="regionChange"></region-select>
    <!-- <industry-select ref="industrySelect" @change="industryChange"></industry-select> -->
  </view>
</template>

<script>
import uploadImgList from "@/components/uploadImg/uploadImgList";
import regionSelect from "@/components/selectPopup/regionSelect";
import industrySelect from "@/components/selectPopup/industrySelect";
import {
  getPositionDetails,
  addPosition,
  editPosition,
} from "@/api/subPage/post.js";
import { industryTree, getDictType, selectLabel, industryAllTree } from "@/api/common.js";
import { verifyForm } from "@/utils/toast";
export default {
  components: {
    uploadImgList,
    regionSelect,
    industrySelect,
  },
  data() {
    return {
      regionText: "", // 省市区街道
      industryText: "", // 岗位行业
      // 时间范围
      datetimerange: [],
      // 计薪方式（1=日结、2=周结、3=月结）
      calculationTypeOption: [
        {
          key: "1",
          name: "日结",
        },
        {
          key: "2",
          name: "周结",
        },
        {
          key: "3",
          name: "月结",
        },
      ],
      // 岗位类型（1=零工、2=兼职，3=全职）
      positionTypeOption: [
        {
          text: "零工",
          value: "1",
          disable: false,
        },
        {
          text: "小时工",
          value: "2",
          disable: true,
        },
        {
          text: "全职",
          value: "3",
          disable: true,
        },
      ],
      // 用工时间类型（1指定日期 2短期 3长期）
      usageTimeTypeOption: [
        {
          key: "1",
          name: "指定日期",
        },
        {
          key: "2",
          name: "短期",
        },
        {
          key: "3",
          name: "长期",
        },
      ],

      // 行业选择列表
      industryList: [],

      // 亮点标签
      labelList: [],

      // 学历字典
      educationDict: [],
      educationList: [],
      educationIndex: undefined,

      // 经验字典
      experienceDict: [],
      experienceList: [],
      experienceIndex: undefined,

      // 薪酬周期
      salaryPeriodDict: [],
      salaryPeriodList: [],
      salaryPeriodIndex: 0,

      form: {
        positionId: undefined, // ID，岗位编号
        positionName: "", // 岗位名称
        industryId: "", // 岗位行业
        province: "", // 省
        city: "", // 市
        area: "", // 区
        street: "", //街道
        detailedAddress: "", //详细位置
        labelId: [], // 亮点标签
        longitude: "", // 经度
        latitude: "", // 纬度
        education: "", // 学历要求
        experience: "", // 经验要求
        recruitmentCount: "", // 招聘人数
        calculationType: "1", // 计薪方式（1=日结、2=周结、3=月结）
        positionType: "1", // 岗位类型（1=零工、2=兼职，3=全职）
        startSalary: "", // 起始薪酬（元）
        endSalary: "", // 结束薪酬（元）
        salaryPeriod: "1", // 薪酬周期
        usageTimeType: "1", // 用工时间类型（1指定日期 2短期 3长期）
        startUsageTime: "", // 起始用工时间
        endUsageTime: "", // 结束用工时间
        description: "", // 岗位描述
        url: "", // 岗位封面
        ossId: [], // 工作环境
      },
      industryId: '',
      secondList: [],
      activeList: [],
      firstLevelText: '',
      secendLevelText: '',
      threeLevelText: '',

      // 岗位封面
      urlPath: "",
      // 工作环境
      ossPath: [],
      ossList: [],

      // 岗位ID
      positionId: "",
      startDate: ''
    };
  },
  watch: {
    // 监听用工时间
    datetimerange(newval) {
      // console.log("范围选:", this.datetimerange);
      this.form.startUsageTime = this.datetimerange[0]; // 起始用工时间
      this.form.endUsageTime = this.datetimerange[1]; // 结束用工时间
    },
  },
  computed: {
    num() {
      return this.form.description.length || 0;
    },
    salaryPeriodLabel() {
      const array = this.salaryPeriodDict;
      if (array?.length > 0) {
        const targetId = this.form.salaryPeriod;
        const foundObject = array.find((item) => item.dictValue === targetId);
        return foundObject.dictLabel;
      } else {
        return "";
      }
    },
    positionHide() {
      let hide =
        this.form.calculationType === "3" && this.form.positionType === "3"
          ? false
          : true;
      return hide;
    },
  },
  onLoad({ id }) {
    if (id && id !== null) {
      this.positionId = id;
      this.getDetails(this.positionId);
    }

    this.getSelectFn();
  },
  methods: {
    timeTypeChange(key) {
      this.form.usageTimeType = key;
    },
    async getDetails(d) {
      const { code, data } = await getPositionDetails(d);
      if (code === 200) {
        this.form = {
          positionId: data.positionId, // ID，岗位编号
          positionName: data.positionName, // 岗位名称
          industryId: data.industryId, // 岗位行业
          province: data.province, // 省
          city: data.city, // 市
          area: data.area, // 区
          street: data.street, //街道
          detailedAddress: data.detailedAddress, //详细位置
          labelId: data.labels.map((v) => v.labelId), // 亮点标签
          longitude: data.longitude, // 经度
          latitude: data.latitude, // 纬度
          education: data.education, // 学历要求
          experience: data.experience, // 经验要求
          recruitmentCount: data.recruitmentCount, // 招聘人数
          calculationType: data.calculationType, // 计薪方式（1=日结、2=周结、3=月结）
          positionType: data.positionType, // 岗位类型（1=零工、2=兼职，3=全职）
          startSalary: data.startSalary, // 起始薪酬（元）
          endSalary: data.endSalary, // 结束薪酬（元）
          salaryPeriod: data.salaryPeriod, // 薪酬周期
          usageTimeType: data.usageTimeType, // 用工时间类型（1指定日期 2短期 3长期）
          startUsageTime: data.startUsageTime, // 起始用工时间
          endUsageTime: data.endUsageTime, // 结束用工时间
          description: data.description, // 岗位描述
          url: data.url.ossId, // 岗位封面
          ossId: data.fileObjs !== "" ? data.fileObjs.map((v) => v.ossId) : [], // 工作环境
        };

        this.typeDisable(data.positionType);

        this.industryText = data.industryLabel; // 岗位行业label
        this.activeList.push(data.industryId)

        this.educationIndex = data.education - 1; // 学历label

        this.experienceIndex = data.experience - 1; // 经验 label

        this.regionText =
          data.provinceLabel + "/" + data.cityLabel + "/" + data.areaLabel; // 省市区label

        this.urlPath = data.url.url; // 封面

        this.datetimerange = [data.startUsageTime, data.endUsageTime]; // 时间

        this.ossList = data.fileObjs.map((item) => {
          return {
            url: item.url,
            name: item.fileName,
            ossId: item.ossId,
          };
        });

        // this.form = data;

        // this.form.industryId = data.industryId; // 岗位行业ID

        // this.form.labelId = data.labels.map((item) => item.labelId); // 亮点标签

        // this.form.education = data.education; // 学历 value

        // this.form.education = data.experience; // 经验value

        // this.form.detailedAddress = data.detailedAddress; // 详细地址

        // this.form.province = data.province;
        // this.form.city = data.city;
        // this.form.area = data.area; // 省市区value

        // this.form.url = data.url.ossId; // value
        // console.log(this.urlPath, "---------path");

        // this.form.startUsageTime = data.startUsageTime; // 起始时间
        // this.form.endUsageTime = data.endUsageTime; // 结束时间

        // this.form.ossId = data.fileObjs.map((item) => item.ossId);
      }

      // industryText
    },

    // 发布
    submitFn() {
      if (this.positionId == "") {
        if (this.form.positionType !== '1') {
          if (!this.form.startSalary) {
            uni.showToast({
              title: '请输入最小薪酬',
              icon: 'none'
            });
            return
          }
          if (!this.form.endSalary) {
            uni.showToast({
              title: '请输入最大薪酬',
              icon: 'none'
            });
            return
          }
          if (+this.form.endSalary >= +this.form.startSalary) {
            addPosition(this.form).then((res) => {
              console.log(res);
              if (res.code == 200) {
                uni.showToast({
                  title: res.msg,
                  duration: 2000,
                });
                uni.navigateBack();
              }
            });
          } else {
            uni.showToast({
              title: '最大薪酬不能小于最小薪酬',
              icon: 'none'
            });
          }
        } else {
          addPosition(this.form).then((res) => {
            console.log(res);
            if (res.code == 200) {
              uni.showToast({
                title: res.msg,
                duration: 2000,
              });
              uni.navigateBack();
            }
          });
        }

      } else {
        if (this.form.positionType !== '1') {
          if (!this.form.startSalary) {
            uni.showToast({
              title: '请输入最小薪酬',
              icon: 'none'
            });
            return
          }
          if (!this.form.endSalary) {
            uni.showToast({
              title: '请输入最大薪酬',
              icon: 'none'
            });
            return
          }
          if (+this.form.endSalary < +this.form.startSalary) {
            console.log(this.form.startSalary);
            uni.showToast({
              title: '最大薪酬不能小于最小薪酬',
              icon: 'none'
            });
            return
          }
        }
        if (this.form.calculationType === "1") {
          if (!verifyForm(this.form.startSalary, "请输入岗位薪酬")) { return; }
          if (!verifyForm(this.form.startUsageTime, "请选择用工开始时间")) { return; }
          if (!verifyForm(this.form.endUsageTime, "请选择用工结束时间")) { return; }
        } else if (this.form.calculationType === "2") {
          if (
            !verifyForm(this.form.startSalary, "请输入完整岗位薪酬") ||
            !verifyForm(this.form.endSalary, "请输入完整岗位薪酬")
          ) { return; }
          if (this.form.usageTimeType === '1') {
            if (!verifyForm(this.form.startUsageTime, "请选择用工开始时间")) { return; }
            if (!verifyForm(this.form.endUsageTime, "请选择用工结束时间")) { return; }
          }
        } else {
          if (
            !verifyForm(this.form.startSalary, "请输入完整岗位薪酬") ||
            !verifyForm(this.form.endSalary, "请输入完整岗位薪酬")
          ) { return; }
          console.log(this.form.startSalary, this.form.endSalary);
        }
        console.log("编辑--------");
        editPosition(this.form).then((res) => {
          if (res.code == 200) {
            uni.showToast({
              title: res.msg,
              duration: 2000,
            });
            uni.navigateBack();
          }
        });
      }
    },
    // 行业弹框
    industryOpen() {
      this.$refs.industryPopup.open();
    },
    industryChange(data) {
      let length = data?.length;
      this.form.industryId = data[length - 1].id;
      this.industryText = data.reduce((pre, item) => {
        let line = pre == "" ? "" : "/";
        return pre + line + item.name;
      }, "");
    },
    // 省市区弹框
    regionOpen() {
      this.$refs.regionSelect.popupOpen();
    },
    regionChange(data) {
      console.log(data);
      // this.regionText = data
      this.form.province = data[0].id; // 省
      this.form.city = data[1].id; // 市
      this.form.area = data[2].id; // 区
      this.form.street = data[3].id; //街道
      this.regionText = data.reduce((pre, item) => {
        let line = pre == "" ? "" : "/";
        return pre + line + item.name;
      }, "");
    },
    // 选择位置
    chooseLocation() {
      let that = this;
      uni.getLocation({
        type: "wgs84",
        success: function (res) {
          console.log("当前位置的经度：" + res.longitude);
          console.log("当前位置的纬度：" + res.latitude);
        },
        complete: function (e) {
          console.log(e);
          // 调用微信小程序的选择位置
          wx.chooseLocation({
            latitude: e.latitude,
            longitude: e.longitude,
            success: (res) => {
              let data = JSON.stringify(res);
              console.log(data);
              // that.form.detailedAddress = res.address; // 详细地址
              that.form.longitude = res.longitude; // 经度
              that.form.latitude = res.latitude; // 纬度
            },
            fail: (error) => {
              console.log("选择位置失败:", error);
            },
          });
        },
      });
    },
    // 打开弹窗
    lableIdChange() {
      this.$refs.labelPopup.open();
    },
    // 关闭弹窗
    popupClose() {
      this.$refs.labelPopup.close();
    },

    // 获取选项
    getSelectFn() {
      // 行业
      industryTree().then((res) => {
        this.industryList = res.data;
        this.firstLevelText = this.industryList[0].label
        this.changeClassfiy(this.industryList[0])
      });
      // 标签
      selectLabel().then((res) => {
        // this.labelList = res.data
        this.labelList = res;
      });
      // 学历字典
      getDictType("wxb_education_type").then((res) => {
        this.educationDict = res.data;
        this.educationList = res.data.map((v) => v.dictLabel);
      }),
        // 经验字典
        getDictType("wxb_experience_work").then((res) => {
          this.experienceDict = res.data;
          this.experienceList = res.data.map((v) => v.dictLabel);
        });
      // 薪酬周期字典
      getDictType("wxb_salary_period_type").then((res) => {
        this.salaryPeriodDict = res.data;
        this.salaryPeriodList = res.data.map((v) => v.dictLabel);
      });
    },
    // 监听标签
    labelChange(id) {
      let laberIds = this.form.labelId || [];

      const index = laberIds.indexOf(id);

      if (index !== -1) {
        laberIds.splice(index, 1);
      } else {
        laberIds.push(id);
      }
      this.form.labelId = laberIds;
    },
    // 监听学历
    educationChange(e) {
      let index = e.detail.value;
      this.educationIndex = index;
      this.form.education = Number(this.educationDict[index].dictValue);
    },
    // 监听经验
    experienceChange(e) {
      let index = e.detail.value;
      this.experienceIndex = index;
      this.form.experience = Number(this.experienceDict[index].dictValue);
      //   console.log(this.form.experience, this.experienceDict[index].dictValue);
    },

    // 监听计薪方式
    tabChange(key) {
      this.form.calculationType = key;
      this.form.positionType = key;
      this.form.salaryPeriod = key;
      if (key === "1") {
        this.form.endSalary = "";
      }
      this.typeDisable(key);
    },
    // 改变岗位类型选项-disable
    typeDisable(key) {
      let option1 = key === "1" ? false : true;
      let option2 = key === "1" ? true : false;
      this.$set(this.positionTypeOption[0], "disable", option1);
      this.$set(this.positionTypeOption[1], "disable", option2);
      this.$set(this.positionTypeOption[2], "disable", option2);
    },
    // 监听岗位类型
    positionTypeChange(e) {
      let value = e.detail.value;
      // console.log(e.detail.value)
      if (this.form.calculationType === "3") {
        this.form.salaryPeriod = value;
      }
    },
    // 监听薪酬周期
    salaryPeriodChange(e) {
      let index = e.detail.value;
      this.salaryPeriodIndex = index;
      this.form.salaryPeriod = this.salaryPeriodDict[index].dictValue;
    },

    // 上传图片监听
    uploadImgFn(data) {
      console.log(data);
      this.ossList = data;
      let ossIds = data.map((v) => v.ossId);
      // let urlArr = data.map((v) => v.url);
      this.form.ossId = ossIds;
      // this.ossPath = urlArr;
    },
    // 分类栏左侧并且获取二级名称
    changeClassfiy(e) {
      this.industryId = e.id;
      industryAllTree(this.industryId).then((res) => {
        if (res.code == 200) {
          this.secondList = res.data; // 获取二级名称-三级岗位
        }
        console.log(this.secondList);
      });
    },
    // 获取岗位数据
    changePost(i, item) {
      // 多选岗位
      if (this.activeList.indexOf(i.id) == -1) {
        this.activeList = []
        this.activeList.push(i.id)
        this.form.industryId = i.id
        this.secendLevelText = item.label
        this.threeLevelText = i.label
      } else {
        this.activeList.splice(this.activeList.indexOf(i.id), 1); // 取消
        this.industryText = ''
        this.form.industryId = ''
      }
    },
    // 取消
    handleCancel() {
      this.$refs.industryPopup.close();
    },
    // 确认
    handleConfirm() {
      this.$refs.industryPopup.close();
      if (this.activeList.length) {
        this.industryText = this.threeLevelText
      } else {
        this.industryText = ''
      }
    },
  },
  mounted() {

    const currentDate = new Date();

    this.startDate = uni.getSystemInfoSync().version >= 1.2 ? currentDate.getFullYear() + '-' + (currentDate.getMonth() + 1) + '-' + currentDate.getDate() : currentDate.toLocaleDateString();

  },
};
</script>

<style lang="scss">
.form-wall {
  padding: 24rpx 0;

  .submit {
    width: 420rpx;
    height: 88rpx;
    font-size: 32rpx;
    color: #ffffff;
    font-weight: 500;
    line-height: 88rpx;
    text-align: center;
    background: #ff9e24;
    border-radius: 44rpx;
    margin: 70rpx auto;
    display: block;
  }
}

.form-main {
  background: #ffffff;
  border-radius: 16rpx;
  margin: 0 24rpx 24rpx;
  padding-bottom: 30rpx;

  .form-h4 {
    position: relative;
    font-size: 32rpx;
    line-height: 46rpx;
    color: rgba(0, 0, 0, 0.88);
    font-weight: 500;
    padding: 28rpx 24rpx 32rpx;
    z-index: 2;

    &::after {
      position: absolute;
      left: 24rpx;
      bottom: 36rpx;
      content: "";
      width: 60rpx;
      height: 15rpx;
      border-radius: 10rpx;
      background: #ff9e24;
      display: block;
      z-index: -1;
    }
  }
}

.flex1 {
  flex: 1;
}

.form-inner {
  position: relative;
  min-height: 98rpx;
  display: flex;
  align-items: center;
  margin: 0 24rpx 8rpx;
  border-bottom: 1rpx solid #f2f2f2;

  .form-lable {
    width: 152rpx;
    font-size: 28rpx;
    line-height: 40rpx;
    color: rgba(0, 0, 0, 0.45);
    font-weight: 500;
    display: flex;
    align-items: center;

    &.required::before {
      content: "";
      width: 8rpx;
      height: 8rpx;
      background: #cd000a;
      border-radius: 50%;
      margin-right: 6rpx;
    }
  }

  .form-lable_tip {
    font-size: 22rpx;
    color: rgba(0, 0, 0, 0.45);
    line-height: 30rpx;
    margin-top: 10rpx;
    margin-bottom: 20rpx;
  }

  &.form-coverImg {
    margin-bottom: 32rpx;
    border-bottom: none;

    .form-lable_tip {
      margin-left: 14rpx;
    }

    .cover-img {
      width: 180rpx;
      height: 132rpx;
      background: #f8f8f8;
    }
  }

  .form-input {
    height: 98rpx;
    font-size: 28rpx;
    color: #000000;
    width: 500rpx;
    display: flex;
    align-items: center;

    &.placeholder {
      color: rgba(0, 0, 0, 0.4);
    }
  }

  .form-picker {
    position: relative;
    height: 98rpx;
    display: flex;
    flex: 1;

    .forward-icon {
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      color: #989898;
      display: flex;
      align-items: center;
    }
  }

  .text-line {
    color: #989898;
    margin: 0 10rpx;
  }

  .address-text {
    height: 98rpx;
    font-size: 28rpx;
    color: #000000;
    display: flex;
    align-items: center;
    flex: 1;
  }

  .address-btn {
    font-size: 28rpx;
    height: 98rpx;
    line-height: 98rpx;
    color: #317ed0;
    font-weight: 500;
  }
}

.form-textarea {
  position: relative;
  height: 318rpx;
  background: #f9f9f9;
  border-radius: 16rpx;
  margin: 0 24rpx;

  .textarea {
    font-size: 28rpx;
    color: #000000;
    padding: 20rpx;
  }

  .textarea-num {
    position: absolute;
    right: 30rpx;
    bottom: 20rpx;
    width: 90rpx;
    font-weight: 500;
    font-size: 22rpx;
    color: rgba(0, 0, 0, 0.45);
    letter-spacing: 0;
    text-align: right;
  }
}

.tab-row {
  display: flex;
  border: 1px solid rgba(255, 158, 36, 0.3);
  border-radius: 35rpx;
  margin: 8rpx 24rpx;

  .tab-col {
    height: 64rpx;
    font-size: 28rpx;
    color: rgba(0, 0, 0, 0.64);
    flex: 1;
    line-height: 64rpx;
    text-align: center;
    border-radius: 35rpx;

    &.active {
      color: #ffffff;
      background: #ff9e24;
    }
  }
}

.form-right {
  min-width: 150rpx;
  font-size: 28rpx;
  color: rgba(0, 0, 0, 0.64);
  font-weight: 500;
  text-align: right;
  display: flex;
  align-items: center;

  .placeholder2 {
    color: rgba(0, 0, 0, 0.64);
    font-size: 28rpx;
  }
}

.tagList {
  display: flex;

  .tagItem {
    height: 64rpx;
    font-size: 24rpx;
    color: rgba(0, 0, 0, 0.88);
    line-height: 64rpx;
    text-align: center;
    flex: 1;
    background: rgba(216, 216, 216, 0.36);
    border-radius: 32rpx;
    margin-right: 14rpx;

    &.active {
      color: #ffffff;
      background: #ff9e24;
    }
  }
}

.labelList2 {
  min-height: 98rpx;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  flex: 1;
  box-sizing: border-box;

  .labelItem {
    display: inline-block;
    line-height: 46rpx;
    font-size: 24rpx;
    color: #585858;
    text-align: center;
    background: #f5f5f5;
    border-radius: 10rpx;
    border: 1rpx solid #d0d0d0;
    margin: 6rpx;
    padding: 0 16rpx;
  }
}

.popup-wall {
  background: #ffffff;
  border-radius: 20rpx 20rpx 0 0;

  .popup-title {
    font-size: 32rpx;
    color: #000000;
    font-weight: 500;
    padding: 32rpx 24rpx;
  }

  .labelList {
    display: flex;
    flex-wrap: wrap;
    margin: 10rpx 14rpx;
    padding-bottom: 140rpx;

    .labelItem {
      width: 23%;
      height: 64rpx;
      font-size: 24rpx;
      color: rgba(0, 0, 0, 0.88);
      line-height: 64rpx;
      text-align: center;
      background: rgba(216, 216, 216, 0.36);
      border-radius: 32rpx;
      margin: 0 1% 20rpx;

      &.active {
        color: #ffffff;
        background: #ff9e24;
      }
    }
  }

  .popup-ft {
    display: flex;
    box-shadow: 0 4rpx 24rpx 0 rgba(0, 0, 0, 0.1);

    .popup-ftBtn {
      font-size: 28rpx;
      color: rgba(0, 0, 0, 0.45);
      line-height: 88rpx;
      text-align: center;
      padding-bottom: 30rpx;
      font-weight: bold;
      flex: 1;

      &.active {
        color: #ff9e24;
      }
    }
  }
}

.cetetory {
  height: 800rpx;

  .classify {
    width: 100%;

    >view {
      display: flex;
    }

    .left {
      width: 242rpx;
      height: 800rpx;
      background: #d8d8d85c;
      color: #00000073;
      overflow: auto;
      font-size: 26rpx;

      >view {
        width: 100%;
        min-height: 120rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .active {
        background-color: #fff;
        color: #000;
      }
    }

    .right {
      width: calc(100% - 200rpx);
      height: 800rpx;
      overflow: auto;
      font-size: 28rpx;
      display: flex;
      flex-wrap: nowrap;
      justify-content: flex-start;
      flex-direction: column;
      align-items: flex-start;
      align-content: space-between;

      .second-item {
        width: 100%;
      }

      .post-name {
        width: 100%;
        font-weight: 600;
        font-size: 28rpx;
        color: #000000e0;
        height: 88rpx;
        line-height: 88rpx;
        padding-left: 20rpx;
        box-sizing: border-box;
      }

      .post-num {
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
      }

      .post {
        width: auto;
        min-width: 218rpx;
        min-height: 65rpx;
        border-radius: 32rpx;
        background-color: #efefef;
        color: #868686;
        margin: 10rpx;
        font-size: 24rpx;
        color: #000000e0;
        padding: 0 8rpx;
        display: flex;
        align-items: center;
        box-sizing: border-box;

        .label {
          width: 100%;
          text-align: center;
          line-height: 40rpx;
        }
      }

      .active {
        min-width: 218rpx;
        min-height: 65rpx;
        border-radius: 32rpx;
        background-color: #ff9e24;
        color: #fff;
        margin: 10rpx;
        padding: 0 8rpx;
        display: flex;
        align-items: center;
        box-sizing: border-box;

        .label {
          width: 100%;
          text-align: center;
          line-height: 40rpx;
        }
      }
    }
  }
}

.btn {
  display: flex;
  width: 100%;
  height: 90rpx;
  font-size: 28rpx;
  background: #fff;
  position: fixed;
  bottom: 0;
  left: 0;

  >view {
    flex: 1;
    height: 100%;
    line-height: 92rpx;
    text-align: center;
  }

  .cancel {
    color: #00000073;
  }

  .confirm {
    color: #ff9e24;
  }
}
</style>
